<template>
	<view class="page" :class="getThemeClass">
		<unavbar :isback="true"   class="my-nav-ber-a-box mallunavbar">
			<view class="malltab flex justify-between align-center">
				<view class="text-main size-30" :class="tabcolor == 1 ?'text_green':''" @click="mallcbtn">
					全部
				</view>
				<view class="text-main size-30" :class="tabcolor== 2 ?'text_green':''" @click="marketcbtn">
					视频
				</view>
			</view>
		</unavbar>
		<view v-if="tabcolor == 1" class="flex justify-between align-center">
			<view class="draw-tag-search">
				<u-input class="draw-tag-search-input" placeholder="搜索画面描述" v-model="param.keyword" type="text" :clearable="false" :border="true" height="50" />
				<view class="draw-tag-search-icon" @click="search"><u-icon name="search"></u-icon></view>
			</view>
			<view class="popBtn" @click="popupShow=!popupShow"><image src="/static/images/x.png" style="width: 70rpx; height: 70rpx;"></image></view>
		</view>
		
		<view class="mall_concent" scroll-y="true" v-if="tabcolor == 1">			
			 <u-checkbox-group
			 @change="checkboxGroupChange" 
			 class="styp0"
			>
				<view  class="content-nodata" v-if="imagesList.length<1">
					<image src="/static/images/no_data.png" style="width: 306rpx;height: 248rpx;"></image>
				</view>
				<view style="width: 100%;">
					<view class="content">
						<view class="list pop" v-for="(item, index) in imagesList" :key="index">
							<image mode="widthFix" :src="item.picture_url" @click="detail(item.draw_id)"></image>
							<view class="vv1">
								<u-checkbox :name="item.draw_id" :value="item.draw_id" v-if="checkboxshow" active-color="#cafd5c" v-model="item.activeflag"></u-checkbox>
							</view>
							<view class="progress" v-if="item.status != 4">
								<view class="progress-text">生成中<text>{{item.progress}}%</text></view>
								<view class="progress-bg">
									<view class="progress-bar" :style="'width: ' + item.progress + '%'"></view>
								</view>
							</view>
						</view>
						
					</view>
				</view>
				
			</u-checkbox-group>
			
			<u-toast ref="uToast" />
			
			<u-popup mode="bottom" v-model="popupShow">
				<view class="popup-content">
					<scroll-view scroll-y="true" style="height: 900rpx;">
						<view class="popup-content-box">
							<view class="home-sdchange flex justify-between align-center">
								<view class="sdchange_icon flex justify-between align-center"></view>
								<view class="sdchange_text flex justify-start align-center">
									<image src="/static/images/34.png" class="img-16" mode=""></image>
									<view class="text">画布尺寸</view>
								</view>
							</view>
							<view class="u-p-l-32 u-p-r-32">
								<view class="input2 flex justify-between align-center flex-wrap p2">
									 <view v-for="(item,index) in allSizeRatioList" :key="index" >
										 <view  class="itemJ" :class="item.flag ? 'itemJactive':''" @click="sizeClick(index)">
											<text>{{item.val}}</text>
										 </view>
									 </view>
								</view>
							</view>
							
							<view class="home-sdchange flex justify-between align-center">
								<view class="sdchange_icon flex justify-between align-center"></view>
								<view class="sdchange_text flex justify-start align-center">
									<image src="/static/images/34.png" class="img-16" mode=""></image>
									<view class="text">模型选择</view>
								</view>
							</view>
							<view class="u-p-l-32 u-p-r-32">
								<view class="input2 flex justify-between align-center flex-wrap p2">
									 <view v-for="(item,index) in modelList" :key="index">
										 <view  class="itemJ" :class="allModelList[index].flag ? 'itemJactive':''" @click="modelClick(index)">
											<text>{{item.model_desc}}</text>
										 </view>
									 </view>
									 <view class="itemJ itemS"  @click="modelMoreClick">
										<text>更多</text> <u-icon v-if="modeisClick"name="arrow-up"></u-icon>
										<u-icon v-else name="arrow-down"></u-icon>
									 </view>
								</view>
							</view>
							
							<view class="home-sdchange flex justify-between align-center">
								<view class="sdchange_icon flex justify-between align-center"></view>
								<view class="sdchange_text flex justify-start align-center">
									<image src="/static/images/34.png" class="img-16" mode=""></image>
									<view class="text">风格选择</view>
								</view>
							</view>
							<view class="u-p-l-32 u-p-r-32">
								<view class="input2 flex justify-between align-center flex-wrap p2">
									 <view v-for="(item,index) in styleList" :key="index">
										 <view  class="itemJ" :class="allStyleList[index].flag ? 'itemJactive':''" @click="styleClick(index)">
											<text>{{item.name}}</text>
										 </view>
									 </view>
									 <view   class="itemJ itemS" @click="styleMoreClick">
										<text>更多</text> <u-icon v-if="styleisClick"name="arrow-up"></u-icon>
										<u-icon v-else name="arrow-down"></u-icon>
									 </view>
								</view>
							</view>
							
							<view class="home-sdchange flex justify-between align-center">
								<view class="sdchange_icon flex justify-between align-center"></view>
								<view class="sdchange_text flex justify-start align-center">
									<image src="/static/images/34.png" class="img-16" mode=""></image>
									<view class="text">高级设置</view>
								</view>
							</view>
							<view class="u-p-l-32 u-p-r-32">
								<view class="input2 flex justify-between align-center flex-wrap p2">
									<view>
										<view  class="itemJ" :class="initImage == 'on' ? 'itemJactive':''" @click="initImage=initImage=='on'?'off':'on'">
											<text>有参考图</text>
										</view>
									</view>	
									<view>	
										<view  class="itemJ" :class="initImage == 'off' ? 'itemJactive':''" @click="initImage=initImage=='off'?'on':'off'">
											<text>无参考图</text>
										</view>
									</view>
									<view>
										<view  class="itemJ" :class="character == 'on' ? 'itemJactive':''" @click="character=character=='on'?'off':'on'">
											<text>有角色同人</text>
										</view>
									</view>	
									<view>	
										<view  class="itemJ" :class="character == 'off' ? 'itemJactive':''" @click="character=character=='off'?'on':'off'">
											<text>无角色同人</text>
										</view>
									</view>
									<view>
										<view  class="itemJ" :class="modelFusion == 'on' ? 'itemJactive':''" @click="modelFusion=modelFusion=='on'?'off':'on'">
											<text>有融合模型</text>
										</view>
									</view>	
									<view>	
										<view  class="itemJ" :class="modelFusion == 'off' ? 'itemJactive':''" @click="modelFusion=modelFusion=='off'?'on':'off'">
											<text>无融合模型</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="v1 flex justify-between align-center">
						<view class="v2" @click="rest">重置</view>
						<view class="v3"  @click="succ">确定</view>
					</view>
					<!-- <view class="confrim-btn">
						<u-button @click="show = false;">确定</u-button>
					</view> -->
				</view>
			</u-popup>
			
			<view class="u-flex align-center justify-between foot-box">
				<view class="end2">
					<view v-if="checkboxval.length>0">
						已选择{{checkboxval.length}}张
					</view>
					<view v-else>
						共{{imagesList.length}}张
					</view>
				</view>
				<view v-if="checkboxval.length>0" class="u-flex align-center justify-between">
					<!-- <view @click="downloadImages">下载</view>
					<view class="foot-box-l">|</view> -->
					<view @click="deleteImgs">删除</view>
				</view>
				<view class="end1" @click="selectbtn">选择</view>
			</view>
		</view>
					
		<view class="mall_concent" scroll-y="true" v-if="tabcolor == 2">
			<view  class="content-nodata" v-if="aiVideoList.length<1">
				<image src="/static/images/no_data.png" style="width: 306rpx;height: 248rpx;"></image>
			</view>
			
			<view style="width: 100%;">
				<view class="content2">
					<view class="list2 pop" v-for="(item, index) in aiVideoList" :key="index">
						<image mode="widthFix" :src="item.cover" ></image>
						<view class="video-play" @click="videoDetail(item.id)">
							<view class="icon-wrapper">
								<u-icon name="play-right-fill"></u-icon>
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>

		
		
	</view>
</template>

<script>
	import count from '../../../components/count.vue'
	import {
		tabbar
	} from "@/common/tabbar.js"
	export default {
		components: {
			count
		},
		data() {
			return {
				isMake: false,
				isCheck: 0,
				checkboxshow: false,
				popupShow: false,
				checkboxval:[],
				imagesList: [],
				aiVideoList: [],
				tabbar: tabbar,
				listStatus: 'loading',
				listPages: 1,
				lastPage: 0,
				screening: [],
				param: {
					limit: 18,  //数量
					page: 1,  // 页码
					status: '',  // 作品状态
					uid: '',  // （获取别人的作品列表时可传）
					keyword: '',  //  搜索名称
					size_ratio: '',  // 画面尺寸
					model_code: '',  // 模型
					style: '',  // 风格模型
					init_image: '',  //【on=>有参考图，off=>无参考图】
					character: '',  //【on=>有角色同人，off=>无角色同人】
					model_fusion: '',  //【on=>有融合模型，off=>无融合模型】
				},
				videoParam: {
					limit: 10,  //数量
					page: 1,  // 页码
				},
				videoLastPage: 0,
				tabcolor:1,
				modeisClick:false,
				modelList: [],
				allModelList:[],
				styleisClick:false,
				styleList: [],
				allStyleList:[],
				allSizeRatioList:[],
				initImage: '', //【on=>有参考图，=>无参考图】
				character: '', //【on=>有角色同人，off=>无角色同人】
				modelFusion: '', //【on=>有融合模型，off=>无融合模型】
				initTime: 1000,
 			};
		},
		onShow() {
			// this.loadIndex(true, true)
			// this.loa()
		},
		onLoad(option) {
			this.isMake = option.is_make
			this.tabcolor = option.tabcolor || 1
			this.getImagesList(1)
			this.getVideoList(1)
			this.getAllSizeRatio()
			this.getAllModelList()
			this.getAllStyle()
		},
		onPullDownRefresh() {
			console.log(1)
		},
		onReachBottom() {
			console.log(this.param.page)
			
			if(this.tabcolor == 1){
				if(this.param.page<this.lastPage){
					this.param.page += 1
					this.getImagesList(0)
				}
				else{
					uni.showToast({
						icon:'none',
						title:'到底啦'
					})
				}
			}
			if(this.tabcolor == 2){
				if(this.videoParam.page<this.videoLastPage){
					this.videoParam.page += 1
					this.getVideoList(0)
				}
				else{
					uni.showToast({
						icon:'none',
						title:'到底啦'
					})
				}
			}
			
		},
		methods: {
			getImagesList(op){
				return new Promise((resolve, reject) => {
					this.$u.api.opuslist(this.param).then(res => {
						if(op == 1) {
							this.imagesList = res.data.data
						}
						else {
							this.imagesList = [...this.imagesList,...res.data.data]
						}
						this.imagesList.forEach((item)=>{
							if(item.status != 4){
								item.timer=null,
								item.progress=0,
								item.initTime=1200
							}
						
						})
						// console.log(this.imagesList)
						this.lastPage =  res.data.last_page
						if(this.isMake){
							this.startTimer()
						}
						
					})
				})
			},
			requestApi(index) {
				
				if(this.imagesList[index].progress == 0){
					this.check(index)
					
					// console.log(index, this.imagesList[index].progress)
				}
				else if (this.imagesList[index].progress == 98){
					this.check(index)
				}
				else{
					this.$set(this.imagesList, index,{...this.imagesList[index],progress:this.imagesList[index].progress+2})
				}
		
			},
			startTimer() {
				let that = this
				that.imagesList.forEach((item, index)=>{
					if(item.status != 4){
						// console.log(item.initTime)
						item.timer = setInterval(() => {
							that.requestApi(index);
						}, item.initTime);
					}
					
				})
				
			},
			check(index){
				let ids = [];
				ids.push(this.imagesList[index].draw_id)
				
				this.$u.api.check({
					ids: ids
				}).then(res=>{
					let info = res.data[0]
					if(info.status == 4){
						this.$set(this.imagesList, index,{...this.imagesList[index],progress:100})
						this.$set(this.imagesList, index,{...this.imagesList[index],status:info.status})
						this.$set(this.imagesList, index,{...this.imagesList[index],picture_url:info.picture_url})
						clearInterval(this.imagesList[index].timer);
					}
					else{
						if(this.imagesList[index].progress == 0){
							this.$set(this.imagesList, index,{...this.imagesList[index],progress:this.imagesList[index].progress+2})
						}
						else if(this.imagesList[index].progress == 98) {
							this.$set(this.imagesList, index,{...this.imagesList[index],initTime:2000})
							
						}
					}
				})
			},
			getVideoList(op) {
				let param = this.videoParam
				this.$u.api.videolist(param).then(res => {
					if(op == 1) {
						this.aiVideoList = res.data.data
					}
					else {
						this.aiVideoList = [...this.aiVideoList,...res.data.data]
					}
					this.videlLastPage =  res.data.last_page
					this.aiVideoList.forEach((item)=>{item.flag=false})
					
				})
			},
			getAllModelList(){
				this.$u.api.allmodellist({}).then(res => {
					this.allModelList = res.data
					this.allModelList.forEach((item)=>{item.flag=false})
					this.modelList = this.allModelList.slice(0, 17)
					// console.log(res)
				})
			},
			getAllStyle(){
				this.$u.api.allstylelist({}).then(res => {
					this.allStyleList = res.data
					this.allStyleList.forEach((item)=>{item.flag=false})
					this.styleList = this.allStyleList.slice(0,5)
				})
			},
			getAllSizeRatio(){				
				this.$u.api.allsizeratiolist({}).then(res => {
					res.data.forEach((val)=>{
						this.allSizeRatioList.push({
							val: val,
							flag: false
						})
					})
				})
			},
			modelMoreClick(){
				if(this.modeisClick){
					this.modelList = this.allModelList.slice(0,17)
				}
				else{
					this.modelList = [...this.modelList,...this.allModelList.slice(17)]
				}
				this.modeisClick = !this.modeisClick
			},
			styleMoreClick(){
				if(this.styleisClick){
					this.styleList = this.allStyleList.slice(0,5)
				}
				else{
					this.styleList = [...this.styleList,...this.allStyleList.slice(5)]
				}
				this.styleisClick = !this.styleisClick
			},
			sizeClick(index) {
				this.allSizeRatioList.forEach((item)=>{item.flag=false})
				this.$set(this.allSizeRatioList, index,{...this.allSizeRatioList[index],flag:true})
			},
			modelClick(index) {
				this.allModelList.forEach((item)=>{item.flag=false})
				this.$set(this.allModelList, index,{...this.allModelList[index],flag:true})
			},
			styleClick(index) {
				this.allStyleList.forEach((item)=>{item.flag=false})
				this.$set(this.allStyleList, index,{...this.allStyleList[index],flag:true})
			},
			back(){
				alert(8)
				uni.navigateBack()
			},
			deleteImgs(){
				this.$u.api.delopus({ids: this.checkboxval}).then(res => {
					if(res.status == 'success'){
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						});
						this.param.page = 1
						this.getImagesList(1)
					}
					
				})
			},
			rest(){
				this.allSizeRatioList.forEach((item)=>{
					item.flag = false
				})
				this.allModelList.forEach((item)=>{
					item.flag = false
				})
				this.allStyleList.forEach((item)=>{
					item.flag = false
				})
				this.param.page = 1
				this.param.size_ratio = ''
				this.param.model_code = ''
				this.param.style = ''
				this.initImage = '' //【on=>有参考图，=>无参考图】
				this.character = '' //【on=>有角色同人，off=>无角色同人】
				this.modelFusion = '' //【on=>有融合模型，off=>无融合模型】
			},
			succ(){
				let that = this
				that.popupShow = false
				that.param.page = 1
				that.param.keyword = ''
				this.allSizeRatioList.forEach((item)=>{
					if(item.flag == true){
						that.param.size_ratio = item.val
					}
				})
				this.allModelList.forEach((item)=>{
					if(item.flag == true){
						that.param.model_code = item.model_code
					}
				})
				this.allStyleList.forEach((item)=>{
					if(item.flag == true){
						that.param.style = item.key
					}
				})
				that.param.init_image = this.initImage
				that.param.character = this.character
				that.param.model_fusion = this.modelFusion
				
				this.getImagesList(1)
				
			},
			search() {
				if(this.param.keyword == ''){
					uni.showToast({
						title: '请输入画面描述',
						icon: 'none'
					});
					return false
				}
				this.rest()
				this.getImagesList(1)
			},
			selectbtn(){
				this.checkboxshow = !this.checkboxshow
				if(!this.checkboxshow){
					this.imagesList.forEach((item)=>{item.activeflag = false})
					this.checkboxval = []
				}
			},
			checkboxGroupChange(e){
				this.checkboxval = e
			},
			mallcbtn(){
				this.tabcolor = 1
			},
			marketcbtn(){
				// uni.showToast({
				// 	icon:'none',
				// 	title:'待开放'
				// })
				this.tabcolor = 2
			},
			detail(id){
				uni.navigateTo({
					url: '/pages/tabbar/bazaar/huajia-detail?id=' + id
				})
			},	
			videoDetail(id) {
				uni.navigateTo({
					url: '/pages/tabbar/bazaar/video-detail?id=' + id
				})
			},
			downloadImages() {
			  const imageUrls = []; // 要下载的多张图片链接数组
			  this.imagesList.forEach((item)=>{
				  if(item.activeflag){
					  imageUrls.push(item.picture_url)
				  }
			  })
			  if(imageUrls.length<1){
				  uni.showToast({
						title: '没有选择要下载的图片',
						icon: 'success'
				  });
			  }
			  imageUrls.forEach((url) => {
				uni.downloadFile({
				  url: url,
				  success: (res) => {
					if (res.statusCode === 200) {
					  uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success: () => {
						  uni.showToast({
							title: '图片保存成功',
							icon: 'success'
						  });
						},
						fail: () => {
						  uni.showToast({
							title: '图片保存失败',
							icon: 'none'
						  });
						}
					  });
					}
				  },
				  fail: () => {
					uni.showToast({
					  title: '图片下载失败',
					  icon: 'none'
					});
				  }
				});
			  });
			}
		}
	}
</script>

<style lang="scss" scoped>

.vv1{
 position: absolute;
 top: 10rpx;
 right: -15rpx;
 z-index: 99;
}
.v1 {
	padding: 30rpx;
}
.v1 .v2{
	width: 330rpx;
	height: 88rpx;
	background: rgba(255,255,255,0.2);
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	line-height: 88rpx;
	font-size: 28rpx;
	font-family: PingFang SC-Semibold, PingFang SC;
	font-weight: 600;
	color: #FFFFFF;
	line-height: 88rpx;
	text-align: center;
}
.v1 .v3{
	width: 330rpx;
	height: 88rpx;
	background: #CAFD5C;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	font-size: 28rpx;
	font-family: PingFang SC-Semibold, PingFang SC;
	font-weight: 600;
	color: #000000;
	line-height: 88rpx;
	text-align: center;
}
.draw-tag-search {
	position: relative;
	width: 100%;
	height: 80rpx;
	margin-top: 30rpx;
	padding-left: 30rpx;
	padding-right: 30rpx;
	padding-bottom: 20rpx;
	
	
	::v-deep .u-input--border {
		border-radius: 22rpx;
		border: 1px solid #333333;
		height: 72rpx;
		background-color: #333333;
	}
	::v-deep uni-input{
		line-height: 2.4em;
		height: 2.4em;
		color: #fff;
	}
	.draw-tag-search-input{
		height: 72rpx;
		border: 1px solid #333333 !important;
	}
	
	.draw-tag-search-icon {
	  position: absolute;
	  top: 0;
	  right: 30rpx;
	  margin-top: 9px; /* 可根据需要调整垂直定位的偏移量 */
	  margin-right: 10px; /* 可根据需要调整水平定位的偏移量 */
	}
	
	
}
.popBtn {
	margin: 25rpx 30rpx 0 0;
}
.popup-content {
	background-color: #242424;
}
.foot-box{
	width: 100%;
	padding: 0 30rpx;
	position: fixed;
	background-color: #000000;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	height: 126rpx;
	border-top: 1px solid rgba(255, 255, 255, .2);
	z-index: 999;
	.end2{
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(255,255,255,0.8);
		line-height: 33rpx;
	}
	.end1{
		width: 190rpx;
		height: 66rpx;
		border-radius: 98rpx 98rpx 98rpx 98rpx;
		opacity: 1;
		border: 2rpx solid rgba(255,255,255,0.2);
		text-align: center;
		line-height: 66rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	 
	}
	.foot-box-l{padding: 0 10rpx;}
}
.u-checkbox-group {
	width: 100%;
}
	.content-nodata {
		width: 100%;
		text-align: center;
		margin-top: 35%;
	}
.mall_concent {
	height: 100%;
}
.content {
	padding: 30rpx;
	box-sizing: border-box;
	column-count: 3;
	column-gap: 10px;
	width: 100%;
	image {
		width: 100%;
		border-radius: 6rpx;
	}
  }

  
  .title {
	margin-left: 15rpx;
	margin-right: 15rpx;
	font-size: 30rpx;
  }
  .con {
	margin: 15rpx;
	margin-top: 20rpx;
	display: flex;
	font-size: 26rpx;
	align-items: center;
	justify-content: space-between;
  }
  .list {
	break-inside: avoid;
	width: 216rpx;
  }
  .content2 {
		padding: 30rpx;
		box-sizing: border-box;
		column-count: 2;
		column-gap: 10px;
		width: 100%;
		.list2 {
			break-inside: avoid;
			width: 324rpx;
			
			image {
				width: 100%;
				border-radius: 6rpx;
				border: solid 2rpx #4b4b4b;
			}
			
			.video-play{
				position: absolute;
				top: 50%;
				left: 50%;
				width: 60rpx;
				height: 60rpx;
				background-color: #4b4b4b;
				border-radius: 50%;
				text-align: center;
				transform: translate(-50%, -50%); /* 将圆点移到元素的中心位置 */
				.icon-wrapper {
				  display: flex;
				  justify-content: center;
				  align-items: center;
				  height: 100%;
				}
			}
		}
    }

	.page {
		background-size: 100% 180rpx;
		background-position: 0 0;
		background-repeat: no-repeat;
		// background-color: #FBF7F2;

	}
	.mallunavbar{
		z-index: 9999;
	//	box-shadow: 0rpx 5rpx 10rpx 1rpx rgba(134, 249, 175, 0.3);
		.malltab{
			width:60%;
			height: 88rpx;
			margin: 0 160rpx 0 40rpx;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			z-index: 0;
			view{
				width: 180rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				border-radius: 78rpx;
				background: #262626;
				margin-right: 15px;
			}
			.text_green{
				color: #CAFD5C;
				border: 1px solid #CAFD5C;
			}
		}
	}

	.popup-content-box {

		.itemJ{
			width: 214rpx;
			height: 70rpx;
			background: rgba(255,255,255,0.15);
			border-radius: 98rpx 98rpx 98rpx 98rpx;
			opacity: 1;
			border: 2rpx solid rgba(255,255,255,0.1);
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			line-height: 70rpx!important;
			margin-bottom: 22rpx;
			position: relative;
			overflow: hidden;
		}
		.itemJactive{
			width: 214rpx;
			height: 70rpx;
			border-radius: 98rpx 98rpx 98rpx 98rpx;
			opacity: 1;
			border: 2rpx solid #CAFD5C;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #CAFD5C;
			line-height: 33rpx;
		}
		.itemS{
			background-color: #242424;
			border: 1px solid #4b4b4b;
			text{
				margin-right: 10rpx;
			}
		}
		.home-sdchange{
			width: 100%;
			height: 74rpx;
			border-radius: 10rpx;
			padding: 0 30rpx;
			color: #999999;
			position: relative;
			.img-16 {
				width: 16rpx;
				height: 16rpx;
			}
			.sdchange_icon{
				position: absolute;
				top: -20rpx;
				.metaimg{
					width: 90rpx;
					height: 30rpx;
					padding-left: 15rpx;
				}
			}
			.sdchange_text{
				width: 50%;
				.text{
					font-size: 24rpx;
					font-weight: bold;
					color: rgba(255,255,255,0.8);
					padding-left: 15rpx;
				}
			}
			.sdchange_switch{
				width: 50%;
				height: 54rpx;
				font-size: 22rpx;
				color: #000000;
				padding: 0 20rpx;
				border-radius: 12rpx;
				background: linear-gradient(90deg, #ACF887 0%, #86F9AF 100%, #86F9AF 100%);
			}
			
			.zhuti_switch{
				padding: 0 2rpx;
				background-color: #262626;;
				border: solid 1rpx #262626;;
				border-radius: 12rpx;
				height: 54rpx;
				.zhuti_switch_img {
					border-radius: 6rpx;
				}
				.zhuti_switch_title {
					padding: 0 10rpx;
				}
			}
		}
	}
	
	.progress {
		position: absolute;
		width: 100%;
		padding: 0 20%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		.progress-text {
			text-align: center;
			font-size: 24rpx;
			text {
				padding-left: 10rpx;
				
				color: #caf45c;
			}
		}
		.progress-bg{
			background-color: #3e3e3e;
		}
		.progress-bar {
			margin-top: 20rpx;
			height: 10rpx;
			background-color: #caf45c;
			transition: width 0.3s ease-in-out;
		}
	}
	.loading {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 50rpx;
		height: 50rpx;
		margin-left: -25rpx;
		margin-top: -25rpx;
	}
</style>
